<template>
  <div>
    <h1 ref="box">dom</h1>
    <!-- <h1 id="box">dom</h1> -->
    <h1 ref="box2">{{ msg }}</h1>
    <button @click="change">改变msg</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world",
    };
  },
  methods: {
    change() {
      this.msg = "vue2vue2";

      this.$nextTick(() => {
        console.log(this.$refs.box2.innerHTML);
      });
      //   setTimeout(() => {
      //     console.log(this.$refs.box2.innerHTML);
      //   }, 0);
    },
  },
  created() {
    //   let box=document.getElementById("box")

    this.$nextTick(() => {
      console.log(this.$refs.box);
    });
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped></style>
